import {FlatList, Image, StyleSheet, TouchableOpacity, TouchableWithoutFeedback, View} from "react-native";
import {Text} from "react-native-paper";
import {useEffect} from "react";
import {useNavigation} from "@react-navigation/native";
import {Product} from "../../types/Product";

interface props {
    products: Product[]
}

export const HorizontalCardList = ({products}: props) => {
    const navigation = useNavigation();

    useEffect(() => {
    }, [products])

    const toAbout = (item: Product) => {
        // @ts-ignore
        navigation.navigate("AboutScreen", item);
    }

    const renderItem = (item: Product) => {
        return <TouchableWithoutFeedback onPress={() => toAbout(item)}>
            <View style={style.card}>
                <TouchableOpacity onPress={() => toAbout(item)}
                                  style={{
                                      height: 130,
                                      justifyContent: "center",
                                      alignItems: "center"
                                  }}
                                  children={<Image source={item.url}/>}/>

                <TouchableOpacity onPress={() => toAbout(item)}
                                  children={<Text style={style.cardTitle}
                                                  children={`${item.title.slice(0, 13)}}...`}/>}/>

                <Text style={style.cardDescr}
                      children={`${item.description.slice(0, 37)}...`}/>

                <View style={{flexDirection: "row", justifyContent: "space-between"}}>
                    <Text style={style.cardPrice}
                          children={`${item.price}p.`}/>
                </View>
            </View>
        </TouchableWithoutFeedback>
    }

    return (
        <FlatList data={products}
                  contentContainerStyle={{
                      paddingVertical: 4
                  }}
                  horizontal={true}
                  showsHorizontalScrollIndicator={false}
                  renderItem={(item) => renderItem(item.item)}/>
    );
};

const style = StyleSheet.create({
    card: {
        width: 140,
        height: 200,
        marginHorizontal: 11,
        padding: 5,
        marginVertical: 10,
        flexDirection: "column",
        borderRadius: 15,
        borderStyle: "solid",
        backgroundColor: "#FFF",
        shadowOffset: {width: -2, height: 4},
        shadowColor: '#171717',
        shadowOpacity: 0.2,
        shadowRadius: 3,
        elevation: 7,
    },
    cardTitle: {
        fontSize: 12,
        fontWeight: "700"
    },
    cardDescr: {
        fontSize: 9,
        fontWeight: "500"
    },
    cardPrice: {
        color: "#EE7100",
        fontSize: 13,
        fontWeight: "700"
    }
})